<template>
  <div id="app">
    <!-- 左侧导航 -->
    <Nav style="width: 200px"/>
    <!-- 右侧内容 -->
    <div class="right">
    <div class="content-top">
      <Breadcumb  />
      <div class="title">
        欢迎进入My vue2Demo
      </div>
    </div>
      <div style="padding:20px">
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"/>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"/>
      </div>
    </div>
  </div>
</template>
<script>
  import Nav from './views/Nav.vue'
  import Breadcumb from './components/Breadcumb.vue'
  export default {
  components: {
    Nav,
    Breadcumb,
  },
  data(){
      return {

      }
  },
  mounted(){
    // console.log(x)
  },
  methods:{

  }
 }
</script>
<style>
@import './assets/index.css';
#app{
  display: flex;
  width: 100%;
  height: 100%;
  background: #eee;
}
.flex{
  flex:1;
}
.right{
  /* padding:20px; */
  width: 100%;

}
.content-top{
  display: flex;
  align-items: center;
  justify-content: left;
  background: #fff;
  height: 50px;
  width: 100%;
}
.title{
  width:80%;
  text-align: center;
  font-weight: bold;
  color: #000000;
  font-size: 20px;
}
</style>
